<template>
  <div>
    <div class="header">
      <h2>我的收货地址</h2>
      <button @click="showAddAddressForm" class="add-address-btn">添加地址</button>
    </div>
    <p class="tip">常用地址：</p>
    <table>
      <thead>
        <tr class="header-row">
          <th>收货人</th>
          <th>电话/手机</th>
          <th>所在地区</th>
          <th>详细地址</th>
          <th>操作</th>
          <th>移动设置</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="address in addresses" :key="address.id" :class="{ 'default-row': address.isDefault }">
          <td>{{ address.name }}</td>
          <td>{{ address.phone }}</td>
          <td>{{ address.region }}</td>
          <td>{{ address.detail }}</td>
          <td>
            <button @click="editAddress(address)" class="action-btn">修改</button>
            <button @click="deleteAddress(address.id)" class="action-btn">删除</button>
          </td>
          <td>
            <button @click="setDefault(address.id)" class="action-btn">
              {{ address.isDefault ? "默认" : "设为默认" }}
            </button>
          </td>
        </tr>
      </tbody>
    </table>

    <!-- 添加/编辑地址表单 -->
    <div v-if="showForm" class="form-container">
      <h3>{{ isEditing ? "编辑地址" : "添加地址" }}</h3>
      <form @submit.prevent="submitForm">
        <div>
          <label for="name">收货人:</label>
          <input v-model="formData.name" id="name" required />
        </div>
        <div>
          <label for="phone">电话/手机:</label>
          <input v-model="formData.phone" id="phone" required />
        </div>
        <div>
          <label for="region">所在地区:</label>
          <input v-model="formData.region" id="region" required />
        </div>
        <div>
          <label for="detail">详细地址:</label>
          <input v-model="formData.detail" id="detail" required />
        </div>
        <button type="submit" class="form-btn">
          {{ isEditing ? "保存" : "添加" }}
        </button>
        <button type="button" @click="cancelForm" class="form-btn">取消</button>
      </form>
    </div>
  </div>
</template>

<script>
import addressesData from "/public/address.json";

export default {
  data() {
    return {
      addresses: addressesData,
      showForm: false,
      isEditing: false,
      formData: {
        id: null,
        name: "",
        phone: "",
        region: "",
        detail: "",
        isDefault: false,
      },
    };
  },
  methods: {
    showAddAddressForm() {
      this.isEditing = false;
      this.resetFormData();
      this.showForm = true;
    },
    editAddress(address) {
      this.isEditing = true;
      this.formData = { ...address };
      this.showForm = true;
    },
    deleteAddress(id) {
      this.addresses = this.addresses.filter((address) => address.id !== id);
    },
    setDefault(id) {
      this.addresses.forEach((address) => {
        address.isDefault = address.id === id;
      });
    },
    submitForm() {
      if (this.isEditing) {
        const index = this.addresses.findIndex((address) => address.id === this.formData.id);
        if (index !== -1) {
          this.$set(this.addresses, index, this.formData);
        }
      } else {
        this.formData.id = Date.now(); // 使用时间戳作为唯一ID
        this.addresses.push(this.formData);
      }
      this.showForm = false;
      this.resetFormData();
    },
    cancelForm() {
      this.showForm = false;
      this.resetFormData();
    },
    resetFormData() {
      this.formData = {
        id: null,
        name: "",
        phone: "",
        region: "",
        detail: "",
        isDefault: false,
      };
    },
  },
};
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  margin: 0 10px;
}

.add-address-btn {
  padding: 8px 16px;
  background-color: #d9c596;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 120px;
}

.add-address-btn:hover {
  background-color: #f4a46f;
}

.tip {
  font-size: 16px;
  color: #666;
  margin-bottom: 10px;
}

table {
  width: 90%;
  border-collapse: collapse;
  margin: 0 auto;
  margin-bottom: 20px;
}

th,
td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

.action-btn {
  margin: 0 5px;
  padding: 5px 10px;
  background-color: #d9c596;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 80px;
  text-align: center;
}

.action-btn:hover {
  background-color: #f4a46f;
}

.form-container {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  background-color: #f9f9f9;
  border-radius: 4px;
}

form div {
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-btn {
  padding: 8px 16px;
  background-color: #d9c596;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-right: 10px;
  width: 100px;
}
.header-row {
  background-color: #f0f8ff; /* 浅蓝色背景 */
}

.header-row th {
  font-weight: bold;
  color: #333; /* 深灰色字体，与背景协调 */
}

.form-btn:hover {
  background-color: #f4a46f;
}

/* 默认地址行样式 */
.default-row {
  background-color: #fffae6; /* 浅黄色背景 */
}
</style>
